<template>
    <ul class="wrapper">
      <li class="item" v-for="(item, index) in list" :key="index">
        <xum-question :number="index < 10 ? '0' + (index + 1) : index + 1"
                      :answer="item.answer" :question="item.question"/>
      </li>
      <xum-button class="btn" @click="more">More Questions...</xum-button>
    </ul>
</template>

<script>
import XumQuestion from '@/views/part/shopDetail/part/goodInfo/XumQuestion'
import XumButton from '@/components/general/XumButton'
import { queryAllFqaByGoodId } from '@/api/ApiFrequentlyQuestion'
import { ResultCode } from '@/constants/constants'
export default {
  name: 'TabQuestions',
  components: { XumButton, XumQuestion },
  props: {
    data: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      queryLoading: false,
      list: []
    }
  },
  computed: {
    trueGood () {
      return this.data && this.data.id && this.data.id > 0
    },
    haveList () {
      return this.list && this.list.length > 0
    }
  },
  methods: {
    more () {
      this.$message.success('more questions... 暂未实现')
    },
    freshData () {
      if (this.trueGood) {
        this.queryLoading = true
        queryAllFqaByGoodId(this.data.id, data => {
          if (data && data.code === ResultCode.OK) {
            data = data.object
            this.list = data
          }
        }, () => {
          this.queryLoading = false
        })
      }
    }
  },
  mounted () {
    this.freshData()
  },
  watch: {
    data () {
      this.freshData()
    }
  }
}
</script>

<style lang="scss" scoped>

  .wrapper{
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: right;

    .item{
      display: block;
      padding: 0;
      margin: 20px 0;
      width: 100%;
    }

  }

</style>
